<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div v-show="modalType === 'info'">
                <Form label-position="right" :model="formItem">
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="姓名：">
                                {{formItem.name? formItem.name : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="性别：">
                                {{formItem.sex? formItem.sex : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="创建时间：">
                                {{this.$common.xeUtils.toDateString(formItem.redis_time, 'yyyy-MM-dd HH:mm:ss')}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="身份证号：">
                                {{formItem.card_no? formItem.card_no : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="电话：">
                                {{formItem.tel? formItem.tel : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="openid：">
                                {{formItem.openid? formItem.openid : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="地点：">
                                {{formItem.loc_title? formItem.loc_title : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="详细地点：">
                                {{formItem.loc_address? formItem.loc_address : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="类型：">
                                <span v-if="formItem.type == 1">绿色通行码</span>
                                <span v-if="formItem.type == 2">通行码已经失效（提报信息有误）</span>
                                <span v-if="formItem.type == 3">黄色通行码（隔离）</span>
                                <span v-if="formItem.type == 4">红色通行码（密接、确诊）</span>
                                <span v-if="formItem.type == 8">等待审核</span>
                                <span v-if="formItem.type == 9">外籍人员等待审核</span>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="是否密接：">
                                <span v-if="formItem.is_contact == 0">否</span>
                                <span v-if="formItem.is_contact == 1">是</span>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'info' || modalType === 'qrcode' || modalType === 'bind'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  findPlacePersonList
} from '@/api/pass'
// import { formatDate } from '@/components/dateFormat'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      formItem: {}
    }
  },
  methods: {
    cancelOption () {
      this.$emit('cancelOption')
    },
    getBindList (row) {
      let place_id = row ? row.id : this.formItem.id
      this.tableLoading = true
      findPlacePersonList({ place_id: place_id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = ret.data.data
          this.orignalData = this.$common.xeUtils.clone(ret.data.data)
          this.tableLoading = false
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    }
  },
  mounted () {
    this.getBindList()
  },
  watch: {
    dataObj (val) {
      this.formItem = val
    }
  },
  computed: {}
}
</script>

<style scoped>
    .badge {
        width: 100px;
        height: 100px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
